<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>科普小站 - 探索科学的奇妙世界</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36D399',
                        accent: '#FF6B35',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .nav-link {
                @apply relative px-4 py-2 text-gray-600 hover:text-primary transition-colors;
            }
            .nav-link::after {
                @apply content-[''] absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300;
            }
            .nav-link:hover::after {
                @apply w-full;
            }
            .nav-link.active {
                @apply text-primary font-medium;
            }
            .nav-link.active::after {
                @apply w-full;
            }
            .feature-link {
                @apply px-4 py-2 text-sm font-medium text-gray-700 hover:text-primary transition-colors;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .like-btn {
                @apply flex items-center text-gray-500 hover:text-primary cursor-pointer transition-colors;
            }
            .like-btn.liked {
                @apply text-primary;
            }
        }
    </style>
</head>
<body class="font-inter bg-light text-dark">
<!-- 功能区 -->
<div class="bg-white shadow-sm">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between h-12">
            <div class="flex items-center space-x-2">
                <i class="fa fa-calendar text-primary"></i>
                <span id="current-date" class="text-sm text-gray-600"></span>
            </div>

            <div class="hidden md:flex items-center space-x-1">
                <a href="tests.html" class="feature-link">
                    <i class="fa fa-lightbulb-o mr-1"></i> 每日科普
                </a>
                <span class="text-gray-300">|</span>
                <a href="books.jsp" class="feature-link">
                    <i class="fa fa-shopping-cart mr-1"></i> 书籍购买
                </a>
                <span class="text-gray-300">|</span>
                <a href="#" class="feature-link">
                    <i class="fa fa-pencil-square-o mr-1"></i> 我要投稿
                </a>
                <span class="text-gray-300">|</span>
                <a href="#" class="feature-link">
                    <i class="fa fa-user mr-1"></i> 个人信息
                </a>
                <span class="text-gray-300">|</span>
                <a href="questions.jsp" class="feature-link">
                    <i class="fa fa-question-circle mr-1"></i> 问题反馈
                </a>
            </div>

            <div class="md:hidden">
                <button id="mobile-menu-btn" class="text-gray-600">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 移动端菜单 -->
<div id="mobile-menu" class="fixed inset-0 bg-white z-50 transform translate-x-full transition-transform duration-300 md:hidden">
    <div class="p-4 border-b border-gray-100 flex justify-between items-center">
        <h2 class="text-xl font-bold">菜单</h2>
        <button id="close-mobile-menu" class="text-gray-500">
            <i class="fa fa-times"></i>
        </button>
    </div>
    <div class="p-4 space-y-3">
        <a href="#" class="block py-2 text-gray-700">
            <i class="fa fa-lightbulb-o mr-2"></i> 每日科普
        </a>
        <a href="#" class="block py-2 text-gray-700">
            <i class="fa fa-shopping-cart mr-2"></i> 书籍购买
        </a>
        <a href="#" class="block py-2 text-gray-700">
            <i class="fa fa-pencil-square-o mr-2"></i> 我要投稿
        </a>
        <a href="#" class="block py-2 text-gray-700">
            <i class="fa fa-user mr-2"></i> 个人信息
        </a>
        <a href="#" class="block py-2 text-gray-700">
            <i class="fa fa-question-circle mr-2"></i> 问题反馈
        </a>
    </div>
</div>

<!-- 导航栏 -->
<header id="navbar" class="bg-white shadow-sm sticky top-0 z-40">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between h-16">
            <div class="flex items-center space-x-2">
                <i class="fa fa-flask text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-dark">科普小站</h1>
            </div>

            <nav class="hidden md:flex items-center space-x-1">
                <a href="#featured" class="nav-link active">首页</a>
                <a href="#articles" class="nav-link">科普文章</a>
                <a href="#reco" class="nav-link">推荐内容</a>
                <a href="#popular" class="nav-link">热门话题</a>
                <a href="#about" class="nav-link">关于我们</a>
            </nav>

            <div class="flex items-center space-x-4">
                <div class="hidden md:flex items-center text-sm text-gray-600">
                    <i class="fa fa-eye mr-1"></i>
                    <span id="visit-count">0</span>
                    <span class="ml-1">次访问</span>
                </div>
                <button id="search-btn" class="text-gray-600 hover:text-primary">
                    <i class="fa fa-search"></i>
                </button>
            </div>
        </div>
    </div>
</header>

<!-- 搜索框 -->
<div id="search-box" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-lg w-full max-w-2xl p-6 relative">
        <button id="close-search" class="absolute top-4 right-4 text-gray-500">
            <i class="fa fa-times"></i>
        </button>
        <h3 class="text-xl font-bold mb-4">搜索科普内容</h3>
        <div class="relative">
            <input type="text" placeholder="输入关键词搜索..." class="w-full py-3 px-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
            <button class="absolute right-2 top-2 bg-primary text-white py-1 px-3 rounded-lg">
                <i class="fa fa-search mr-1"></i> 搜索
            </button>
        </div>
    </div>
</div>

<!-- 主内容区 -->
<main class="container mx-auto px-4 py-8">
    <!-- 特色内容 -->
    <section id="featured" class="mb-12">
        <a href="meteorology.jsp" class="block group"> <!-- 添加链接并设置为块级元素 -->
            <div class="bg-gradient-to-r from-primary/90 to-primary rounded-2xl overflow-hidden shadow-lg transition-all duration-300 group-hover:shadow-xl"> <!-- 添加悬停效果 -->
                <div class="flex flex-col md:flex-row">
                    <div class="p-6 md:p-8 md:w-1/2 text-white">
                        <h2 class="text-2xl md:text-3xl font-bold mb-4 group-hover:text-white/90 transition-colors">宇宙的奥秘：探索黑洞的神秘世界</h2>
                        <p class="text-white/80 mb-6 group-hover:text-white transition-colors">黑洞是宇宙中最神秘的天体之一，它们的引力如此强大，甚至连光也无法逃脱。</p>
                        <div class="btn-primary inline-flex items-center bg-white text-primary font-medium px-4 py-2 rounded-lg group-hover:bg-white/90 transition-colors">
                            阅读全文 <i class="fa fa-long-arrow-right ml-1"></i>
                        </div>
                    </div>
                    <div class="md:w-1/2 h-64 md:h-auto">
                        <img src="https://picsum.photos/seed/blackhole/800/600" alt="黑洞示意图" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"> <!-- 添加图片缩放效果 -->
                    </div>
                </div>
            </div>
        </a>
    </section>
    <!-- 最新科普文章 -->
    <section id="articles" class="mb-12">
        <h2 class="text-2xl font-bold mb-4 flex items-center">
            <i class="fa fa-newspaper-o text-primary mr-2"></i> 最新科普文章
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <a href="geology.jsp" class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
                <img src="https://picsum.photos/seed/article1/600/400" alt="黑洞的事件视界" class="w-full h-48 object-cover">
                <div class="p-5">
                    <h3 class="font-medium text-lg mb-2">黑洞的事件视界：进入后无法逃脱的边界</h3>
                    <p class="text-gray-600 text-sm mb-4 line-clamp-2">事件视界是黑洞周围的一个边界，一旦进入这个边界，任何物质甚至光都无法逃脱黑洞的引力。</p>
                    <div class="flex items-center justify-between">
                        <span class="text-xs text-gray-500">2025-06-15</span>
                        <div class="flex items-center space-x-3">
                            <div class="like-btn" data-id="article1">
                                <i class="fa fa-thumbs-up mr-1"></i>
                                <span class="like-count">128</span>
                            </div>
                            <div class="flex items-center text-gray-500">
                                <i class="fa fa-eye mr-1"></i>
                                <span>3.2k</span>
                            </div>
                        </div>
                    </div>
                </div>
            </a>

            <a href="ocean.jsp" class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
                <img src="https://picsum.photos/seed/article2/600/400" alt="DNA双螺旋结构" class="w-full h-48 object-cover">
                <div class="p-5">
                    <h3 class="font-medium text-lg mb-2">DNA双螺旋结构：生命的密码</h3>
                    <p class="text-gray-600 text-sm mb-4 line-clamp-2">1953年，沃森和克里克发现了DNA的双螺旋结构，这一发现开启了分子生物学的新时代。</p>
                    <div class="flex items-center justify-between">
                        <span class="text-xs text-gray-500">2025-06-20</span>
                        <div class="flex items-center space-x-3">
                            <div class="like-btn" data-id="article2">
                                <i class="fa fa-thumbs-up mr-1"></i>
                                <span class="like-count">215</span>
                            </div>
                            <div class="flex items-center text-gray-500">
                                <i class="fa fa-eye mr-1"></i>
                                <span>4.7k</span>
                            </div>
                        </div>
                    </div>
                </div>
            </a>

            <a href="biology.jsp" class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
                <img src="https://picsum.photos/seed/article3/600/400" alt="量子力学的奇妙世界" class="w-full h-48 object-cover">
                <div class="p-5">
                    <h3 class="font-medium text-lg mb-2">量子力学的奇妙世界：不确定性原理</h3>
                    <p class="text-gray-600 text-sm mb-4 line-clamp-2">海森堡不确定性原理告诉我们，我们无法同时精确测量一个粒子的位置和动量，这是量子世界的基本特性。</p>
                    <div class="flex items-center justify-between">
                        <span class="text-xs text-gray-500">2025-06-25</span>
                        <div class="flex items-center space-x-3">
                            <div class="like-btn" data-id="article3">
                                <i class="fa fa-thumbs-up mr-1"></i>
                                <span class="like-count">189</span>
                            </div>
                            <div class="flex items-center text-gray-500">
                                <i class="fa fa-eye mr-1"></i>
                                <span>5.1k</span>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </section>

    <!-- 推荐内容（带配图链接形式） -->
    <section id="reco" class="mb-12">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-2xl font-bold flex items-center">
                <i class="fa fa-thumbs-up text-primary mr-2"></i> 为你推荐
            </h2>
            <button id="refresh-recommendations" class="text-gray-400 hover:text-primary transition-colors">
                <i class="fa fa-refresh text-lg"></i>
            </button>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <a href="industrial.jsp" class="bg-white rounded-xl overflow-hidden shadow-sm card-hover flex">
                <img src="https://picsum.photos/seed/reco1/300/300" alt="宇宙大爆炸理论" class="w-1/3 object-cover">
                <div class="p-5 w-2/3">
                    <h3 class="font-medium text-lg mb-2">宇宙大爆炸理论：我们的宇宙是如何诞生的？</h3>
                    <p class="text-gray-600 text-sm mb-4 line-clamp-3">宇宙大爆炸是关于宇宙起源的主流理论，它描述了宇宙从一个高温高密度的奇点开始膨胀的过程。</p>
                    <div class="flex items-center justify-between">
                        <span class="text-xs text-gray-500">2025-07-01</span>
                        <div class="like-btn" data-id="reco1">
                            <i class="fa fa-thumbs-up mr-1"></i>
                            <span class="like-count">98</span>
                        </div>
                    </div>
                </div>
            </a>

            <a href="social%20security.jsp" class="bg-white rounded-xl overflow-hidden shadow-sm card-hover flex">
                <img src="https://picsum.photos/seed/reco2/300/300" alt="人类基因组计划" class="w-1/3 object-cover">
                <div class="p-5 w-2/3">
                    <h3 class="font-medium text-lg mb-2">人类基因组计划：解密生命的密码</h3>
                    <p class="text-gray-600 text-sm mb-4 line-clamp-3">人类基因组计划是一项旨在测定人类基因组中所有基因序列的国际科学研究项目。</p>
                    <div class="flex items-center justify-between">
                        <span class="text-xs text-gray-500">2025-06-30</span>
                        <div class="like-btn" data-id="reco2">
                            <i class="fa fa-thumbs-up mr-1"></i>
                            <span class="like-count">156</span>
                        </div>
                    </div>
                </div>
            </a>

            <a href="transportation.jsp" class="bg-white rounded-xl overflow-hidden shadow-sm card-hover flex">
                <img src="https://picsum.photos/seed/reco3/300/300" alt="相对论与时空弯曲" class="w-1/3 object-cover">
                <div class="p-5 w-2/3">
                    <h3 class="font-medium text-lg mb-2">相对论与时空弯曲：爱因斯坦的伟大理论</h3>
                    <p class="text-gray-600 text-sm mb-4 line-clamp-3">爱因斯坦的相对论颠覆了我们对时间和空间的理解，揭示了引力是时空弯曲的表现。</p>
                    <div class="flex items-center justify-between">
                        <span class="text-xs text-gray-500">2025-06-28</span>
                        <div class="like-btn" data-id="reco3">
                            <i class="fa fa-thumbs-up mr-1"></i>
                            <span class="like-count">132</span>
                        </div>
                    </div>
                </div>
            </a>

            <a href="complex.jsp" class="bg-white rounded-xl overflow-hidden shadow-sm card-hover flex">
                <img src="https://picsum.photos/seed/reco4/300/300" alt="量子计算" class="w-1/3 object-cover">
                <div class="p-5 w-2/3">
                    <h3 class="font-medium text-lg mb-2">量子计算：下一代超级计算机</h3>
                    <p class="text-gray-600 text-sm mb-4 line-clamp-3">量子计算利用量子力学原理进行信息处理，具有远超传统计算机的计算能力。</p>
                    <div class="flex items-center justify-between">
                        <span class="text-xs text-gray-500">2025-06-25</span>
                        <div class="like-btn" data-id="reco4">
                            <i class="fa fa-thumbs-up mr-1"></i>
                            <span class="like-count">78</span>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </section>

    <!-- 热门话题 -->
    <section id="popular" class="mb-12">
        <h2 class="text-2xl font-bold mb-4 flex items-center">
            <i class="fa fa-fire text-accent mr-2"></i> 热门话题
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <a href="#" class="bg-white p-4 rounded-lg shadow-sm card-hover">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                        <i class="fa fa-rocket"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="font-medium">太空探索</h3>
                        <p class="text-xs text-gray-500">128 篇文章</p>
                    </div>
                </div>
            </a>

            <a href="#" class="bg-white p-4 rounded-lg shadow-sm card-hover">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center text-secondary">
                        <i class="fa fa-dna"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="font-medium">生命科学</h3>
                        <p class="text-xs text-gray-500">96 篇文章</p>
                    </div>
                </div>
            </a>

            <a href="#" class="bg-white p-4 rounded-lg shadow-sm card-hover">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center text-accent">
                        <i class="fa fa-microchip"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="font-medium">人工智能</h3>
                        <p class="text-xs text-gray-500">156 篇文章</p>
                    </div>
                </div>
            </a>

            <a href="#" class="bg-white p-4 rounded-lg shadow-sm card-hover">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-500">
                        <i class="fa fa-atom"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="font-medium">量子物理</h3>
                        <p class="text-xs text-gray-500">87 篇文章</p>
                    </div>
                </div>
            </a>
        </div>
    </section>

    <!-- 关于我们 -->
    <section id="about" class="mb-12">
        <div class="bg-white rounded-xl shadow-sm p-6 md:p-8">
            <h2 class="text-2xl font-bold mb-4">关于科普小站</h2>
            <p class="text-gray-600 mb-4">科普小站致力于为广大科学爱好者提供高质量的科普内容，涵盖物理学、化学、生物学、天文学等多个领域。我们的使命是让科学知识变得更加通俗易懂，激发人们对科学的兴趣和探索精神。</p>
            <div class="flex flex-col md:flex-row md:space-x-8 space-y-4 md:space-y-0">
                <div class="flex-1">
                    <h3 class="font-medium text-lg mb-2">我们的愿景</h3>
                    <p class="text-gray-600">成为中国最具影响力的科普平台，让科学知识走进千家万户。</p>
                </div>
                <div class="flex-1">
                    <h3 class="font-medium text-lg mb-2">我们的价值观</h3>
                    <p class="text-gray-600">严谨、准确、客观、有趣，用科学的态度传递知识。</p>
                </div>
                <div class="flex-1">
                    <h3 class="font-medium text-lg mb-2">联系我们</h3>
                    <p class="text-gray-600">邮箱：contact@kepu.com</p>
                    <p class="text-gray-600">电话：400-123-4567</p>
                </div>
            </div>
        </div>
    </section>
</main>

<!-- 页脚 -->
<footer class="bg-dark text-white py-8">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
                <div class="flex items-center space-x-2 mb-4">
                    <i class="fa fa-flask text-primary text-2xl"></i>
                    <h2 class="text-xl font-bold">科普小站</h2>
                </div>
                <p class="text-gray-400 text-sm mb-4">探索科学的奇妙世界</p>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-weibo"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-wechat"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-twitter"></i>
                    </a>
                </div>
            </div>

            <div>
                <h3 class="text-lg font-medium mb-4">内容分类</h3>
                <ul class="space-y-2 text-gray-400">
                    <li><a href="#" class="hover:text-white transition-colors">天文宇宙</a></li>
                    <li><a href="#" class="hover:text-white transition-colors">生命科学</a></li>
                    <li><a href="#" class="hover:text-white transition-colors">物理化学</a></li>
                    <li><a href="#" class="hover:text-white transition-colors">科技创新</a></li>
                    <li><a href="#" class="hover:text-white transition-colors">地球环境</a></li>
                </ul>
            </div>

            <div>
                <h3 class="text-lg font-medium mb-4">快速链接</h3>
                <ul class="space-y-2 text-gray-400">
                    <li><a href="#" class="hover:text-white transition-colors">关于我们</a></li>
                    <li><a href="#" class="hover:text-white transition-colors">我要投稿</a></li>
                    <li><a href="#" class="hover:text-white transition-colors">书籍购买</a></li>
                    <li><a href="#" class="hover:text-white transition-colors">问题反馈</a></li>
                    <li><a href="#" class="hover:text-white transition-colors">隐私政策</a></li>
                </ul>
            </div>

            <div>
                <h3 class="text-lg font-medium mb-4">订阅我们</h3>
                <p class="text-gray-400 text-sm mb-4">订阅我们的科普周刊，获取最新科学资讯</p>
                <div class="flex">
                    <input type="email" placeholder="输入您的邮箱" class="px-4 py-2 rounded-l-lg w-full focus:outline-none focus:ring-2 focus:ring-primary">
                    <button class="bg-primary hover:bg-primary/90 text-white px-4 rounded-r-lg">
                        <i class="fa fa-paper-plane"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
            <p>&copy; 2025 科普小站. 保留所有权利.</p>
        </div>
    </div>
</footer>

<!-- 回到顶部按钮 -->
<button id="back-to-top" class="fixed bottom-6 right-6 bg-primary/90 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-primary">
    <i class="fa fa-arrow-up"></i>
</button>

<!-- 脚本 -->
<script>
    // 显示当前日期
    document.addEventListener('DOMContentLoaded', function() {
        const now = new Date();
        const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
        document.getElementById('current-date').textContent = now.toLocaleDateString('zh-CN', options);

        // 初始化浏览量计数
        initVisitCount();

        // 初始化点赞功能
        initLikeButtons();

        // 初始化导航栏滚动效果
        initNavbarScroll();

        // 初始化回到顶部按钮
        initBackToTopButton();

        // 初始化移动端菜单
        initMobileMenu();

        // 初始化搜索框
        initSearchBox();

        // 初始化导航链接
        initNavLinks();
    });

    // 初始化浏览量计数
    function initVisitCount() {
        let visitCount = localStorage.getItem('visitCount');
        if (!visitCount) {
            visitCount = 1;
        } else {
            visitCount = parseInt(visitCount) + 1;
        }
        localStorage.setItem('visitCount', visitCount);
        document.getElementById('visit-count').textContent = visitCount;
    }

    // 初始化点赞功能
    function initLikeButtons() {
        const likeButtons = document.querySelectorAll('.like-btn');

        likeButtons.forEach(button => {
            const itemId = button.getAttribute('data-id');
            const isLiked = localStorage.getItem(`liked_${itemId}`) === 'true';
            const countElement = button.querySelector('.like-count');
            let count = parseInt(countElement.textContent);

            if (isLiked) {
                button.classList.add('liked');
            }

            button.addEventListener('click', function() {
                if (!isLiked) {
                    // 点赞
                    count++;
                    countElement.textContent = count;
                    button.classList.add('liked');
                    localStorage.setItem(`liked_${itemId}`, 'true');
                }
                // 已点赞则不做处理，实现只能点赞一次
            });
        });
    }

    // 初始化导航栏滚动效果
    function initNavbarScroll() {
        const navbar = document.getElementById('navbar');
        let lastScrollTop = 0;

        window.addEventListener('scroll', function() {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

            if (scrollTop > 50) {
                navbar.classList.add('py-2', 'shadow-md');
                navbar.classList.remove('py-4');
            } else {
                navbar.classList.add('py-4');
                navbar.classList.remove('py-2', 'shadow-md');
            }

            lastScrollTop = scrollTop;
        });
    }

    // 初始化回到顶部按钮
    function initBackToTopButton() {
        const backToTopButton = document.getElementById('back-to-top');

        window.addEventListener('scroll', function() {
            if (window.pageYOffset > 300) {
                backToTopButton.classList.remove('opacity-0', 'invisible');
                backToTopButton.classList.add('opacity-100', 'visible');
            } else {
                backToTopButton.classList.add('opacity-0', 'invisible');
                backToTopButton.classList.remove('opacity-100', 'visible');
            }
        });

        backToTopButton.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    }

    // 初始化移动端菜单
    function initMobileMenu() {
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const closeMobileMenuBtn = document.getElementById('close-mobile-menu');
        const mobileMenu = document.getElementById('mobile-menu');

        mobileMenuBtn.addEventListener('click', function() {
            mobileMenu.classList.remove('translate-x-full');
        });

        closeMobileMenuBtn.addEventListener('click', function() {
            mobileMenu.classList.add('translate-x-full');
        });
    }

    // 初始化搜索框
    function initSearchBox() {
        const searchBtn = document.getElementById('search-btn');
        const closeSearchBtn = document.getElementById('close-search');
        const searchBox = document.getElementById('search-box');

        searchBtn.addEventListener('click', function() {
            searchBox.classList.remove('hidden');
            setTimeout(() => {
                searchBox.querySelector('input').focus();
            }, 300);
        });

        closeSearchBtn.addEventListener('click', function() {
            searchBox.classList.add('hidden');
        });

        // 点击搜索框外部关闭
        searchBox.addEventListener('click', function(e) {
            if (e.target === searchBox) {
                searchBox.classList.add('hidden');
            }
        });
    }

    // 初始化导航链接
    function initNavLinks() {
        const navLinks = document.querySelectorAll('.nav-link');

        navLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();

                // 移除所有活动状态
                navLinks.forEach(l => l.classList.remove('active'));

                // 添加当前活动状态
                this.classList.add('active');

                // 平滑滚动到目标位置
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;

                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });
    }

    // 推荐内容刷新
    document.getElementById('refresh-recommendations').addEventListener('click', function() {
        const refreshButton = this;
        refreshButton.classList.add('animate-spin');

        setTimeout(() => {
            const recoSection = document.getElementById('reco');
            recoSection.innerHTML = `
                    <div class="flex items-center justify-between mb-4">
                        <h2 class="text-2xl font-bold flex items-center">
                            <i class="fa fa-thumbs-up text-primary mr-2"></i> 为你推荐
                        </h2>
                        <button id="refresh-recommendations" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-refresh text-lg"></i>
                        </button>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <a href="#" class="bg-white rounded-xl overflow-hidden shadow-sm card-hover flex">
                            <img src="https://picsum.photos/seed/newreco1/300/300" alt="神经科学" class="w-1/3 object-cover">
                            <div class="p-5 w-2/3">
                                <h3 class="font-medium text-lg mb-2">神经科学：大脑如何工作？</h3>
                                <p class="text-gray-600 text-sm mb-4 line-clamp-3">神经科学研究神经系统的结构和功能，探索大脑如何产生思想、情感和行为。</p>
                                <div class="flex items-center justify-between">
                                    <span class="text-xs text-gray-500">2025-07-02</span>
                                    <div class="like-btn" data-id="newreco1">
                                        <i class="fa fa-thumbs-up mr-1"></i>
                                        <span class="like-count">65</span>
                                    </div>
                                </div>
                            </div>
                        </a>

                        <a href="#" class="bg-white rounded-xl overflow-hidden shadow-sm card-hover flex">
                            <img src="https://picsum.photos/seed/newreco2/300/300" alt="气候变化" class="w-1/3 object-cover">
                            <div class="p-5 w-2/3">
                                <h3 class="font-medium text-lg mb-2">气候变化与人类活动：我们如何影响地球的气候？</h3>
                                <p class="text-gray-600 text-sm mb-4 line-clamp-3">气候变化是当今全球面临的最严峻挑战之一，了解人类活动对气候的影响至关重要。</p>
                                <div class="flex items-center justify-between">
                                    <span class="text-xs text-gray-500">2025-07-01</span>
                                    <div class="like-btn" data-id="newreco2">
                                        <i class="fa fa-thumbs-up mr-1"></i>
                                        <span class="like-count">87</span>
                                    </div>
                                </div>
                            </div>
                        </a>

                        <a href="#" class="bg-white rounded-xl overflow-hidden shadow-sm card-hover flex">
                            <img src="https://picsum.photos/seed/newreco3/300/300" alt="人工智能伦理" class="w-1/3 object-cover">
                            <div class="p-5 w-2/3">
                                <h3 class="font-medium text-lg mb-2">人工智能伦理：机器应该如何行为？</h3>
                                <p class="text-gray-600 text-sm mb-4 line-clamp-3">随着人工智能技术的快速发展，我们需要思考如何确保AI系统的设计和使用符合伦理道德标准。</p>
                                <div class="flex items-center justify-between">
                                    <span class="text-xs text-gray-500">2025-06-30</span>
                                    <div class="like-btn" data-id="newreco3">
                                        <i class="fa fa-thumbs-up mr-1"></i>
                                        <span class="like-count">112</span>
                                    </div>
                                </div>
                            </div>
                        </a>

                        <a href="#" class="bg-white rounded-xl overflow-hidden shadow-sm card-hover flex">
                            <img src="https://picsum.photos/seed/newreco4/300/300" alt="可再生能源" class="w-1/3 object-cover">
                            <div class="p-5 w-2/3">
                                <h3 class="font-medium text-lg mb-2">可再生能源：未来能源的希望</h3>
                                <p class="text-gray-600 text-sm mb-4 line-clamp-3">太阳能、风能、水能等可再生能源是解决全球能源危机和气候变化的关键。</p>
                                <div class="flex items-center justify-between">
                                    <span class="text-xs text-gray-500">2025-06-29</span>
                                    <div class="like-btn" data-id="newreco4">
                                        <i class="fa fa-thumbs-up mr-1"></i>
                                        <span class="like-count">93</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                `;

            refreshButton.classList.remove('animate-spin');

            // 重新初始化新添加的点赞按钮
            initLikeButtons();

            // 重新绑定刷新按钮事件
            document.getElementById('refresh-recommendations').addEventListener('click', function() {
                location.reload(); // 简单刷新页面，实际项目中可以使用更优雅的方式
            });
        }, 800);
    });
</script>
</body>
</html>